Skip to content

feat: extract @opensourceframework/react-three-portfolio#120

Open
riceharvest wants to merge 1 commit intomainfrom
fix/issue-56
Open

feat: extract @opensourceframework/react-three-portfolio#120
riceharvest wants to merge 1 commit intomainfrom
fix/issue-56

Conversation

@riceharvest
Copy link
Copy Markdown
Owner

Summary

Extracted Three.js/React Three Fiber visual components from the gabriel project into a new reusable package: @opensourceframework/react-three-portfolio.

This package provides stunning 3D visual effects for portfolio and landing pages, including custom shaders, animations, and post-processing effects.

Changes

  • Created new package @opensourceframework/react-three-portfolio
  • Exported 7 visual components from gabriel:
    • HeroCanvas - Complete 3D scene combining all effects
    • HeroOrb - Pulsating orb with custom shader and noise
    • EnergyWaves - Energy wave material with radial patterns
    • Eye - Realistic animated eye with blinking and mouse tracking
    • LightningEffect - Procedural lightning bolts
    • SparkleEffect - Orbiting particle system
    • PostProcessing - Bloom, vignette, noise, chromatic aberration
  • Added full TypeScript support with type declarations
  • Added test suite with export validation
  • Added comprehensive documentation (README, CHANGELOG, llms.txt)

Technical Details

  • Dependencies: @react-three/fiber, @react-three/drei, @react-three/postprocessing, three, postprocessing
  • Build system: tsup (CJS + ESM + types)
  • Test framework: Vitest
  • All components are styled as "use client" for React Three Fiber

Testing

  • Build: ✓ Successful (CJS + ESM + DTS)
  • Tests: ✓ 8/8 tests passing (export validation)
  • TypeScript: ✓ No type errors

Notes

Components are sourced from the gabriel project (src/components/canvas/) and have been adapted for standalone use. All original shader effects preserved.

Fixes #56

@chatgpt-codex-connector
Copy link
Copy Markdown

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat: extract @opensourceframework/react-three-portfolio

1 participant